<template>
	<Layout :showBack="false" tabbar :innerBottom="false">
		<template #title>
			<view class="inline-flex aic home-header">
				<view class="inline-flex location">
					<text>上海</text>
					<image src="/static/image/home/arrow-down.png"></image>
				</view>
				<view class="split-line"></view>
				<image class="inline-flex logo" src="/static/image/home/logo.png"></image>
				<!-- <image class="inline-flex logo" src="/static/image/logo.gif"></image> -->
			</view>
		</template>

		<view class="inline-flex fill jcc home-search">
			<view class="inline-flex aic jcsb home-search-box">
				<image class="home-search__icon" src="/static/image/home/search.png"></image>
				<input class="home-search__input" v-model="keyword" placeholder="律师、律所、服务、擅长"
					placeholder-class="home-search__input--placeholder"
					placeholder-style="color: #C0C0C0;font-size: 28rpx;" confirm-type="搜索" @confirm="tapToSearch" />
				<view class="inline-flex aic jcc home-search__button" @click.stop="tapToSearch">搜索</view>
			</view>
		</view>

		<view class="home-focus">
			<u-swiper :list="bannerList" border-radius="20"></u-swiper>
		</view>

		<view class="inline-flex aic jcsb fill home-service">
			<view class="inline-flex column jcsb aic home-service__item" @click.stop="tapToService(0)">
				<view class="inline-flex home-service__item__icon">
					<image src="/static/image/home/writ-template.png"></image>
				</view>
				<view class="inline-flex home-service__item__text">文书模板</view>
			</view>

			<view class="inline-flex column jcsb aic home-service__item" @click.stop="tapToService(1)">
				<view class="inline-flex home-service__item__icon">
					<image src="/static/image/home/ghostwrite-writ.png"></image>
				</view>
				<view class="inline-flex home-service__item__text">代写文书</view>
			</view>

			<view class="inline-flex column jcsb aic home-service__item" @click.stop="tapToService(2)">
				<view class="inline-flex home-service__item__icon">
					<image src="/static/image/home/legal-consulting.png"></image>
				</view>
				<view class="inline-flex home-service__item__text">法律咨询</view>
			</view>

			<view class="inline-flex column jcsb aic home-service__item" @click.stop="tapToService(3)">
				<view class="inline-flex home-service__item__icon">
					<image src="/static/image/home/legal-counsel.png"></image>
				</view>
				<view class="inline-flex home-service__item__text">法律顾问</view>
			</view>

			<view class="inline-flex column jcsb aic home-service__item" @click.stop="tapToService(4)">
				<view class="inline-flex home-service__item__icon">
					<image src="/static/image/home/litigation-service.png"></image>
				</view>
				<view class="inline-flex home-service__item__text">诉讼服务</view>
			</view>
		</view>

		<view class="inline-flex aic jcsb fill home-action">
			<view class="inline-flex aic home-action__item" @click.stop="tapMakePhoneCall">
				<image class="telephone-icon" src="/static/image/home/telephone.png"></image>
				<view class="iflex column home-action__item__info">
					<view class="info-title">拨打电话</view>
					<view class="info-desc">24小时在线</view>
				</view>
			</view>

			<view class="inline-flex aic home-action__item" @click.stop="tapToLeaveMessage">
				<image class="leave-word-icon" src="/static/image/home/leave-word.png"></image>
				<view class="iflex column home-action__item__info">
					<view class="info-title">我要留言</view>
					<view class="info-desc">留下您的建议</view>
				</view>
			</view>
		</view>

		<SectionTitle showLine>
			<template #title>律师</template>
			<view @click.stop="tapToLawyer">
				查看更多<view class="icon-more" style="margin-left: 12rpx;"></view>
			</view>
		</SectionTitle>

		<view class="iflex fill home-recommend-new">
			<scroll-view class="home-recommend-new__scroll" scroll-x="true">
				<view class="iflex">
					<view v-for="item of recommendList" :key="item.lawFirmId" @click.stop="tapToLawDetail(item)"
						class="iflex jcsb recommend-item">
						<view class="iflex column recommend-item__info">
							<view class="iflex aic recommend-item__info__name">
								<view class="ellipsis">{{item.lawFirmName}}</view>
							</view>
							<view class="recommend-item__info__other">
								<template v-if="item.lawFirmType == 1">
									执业{{item.practice}}年
									<text style="padding:0 5rpx;">|</text>
									咨询人数{{item.followers}}人
								</template>
								<template v-else>
									{{item.certification == 1 ? '执业认证':'未认证'}}
								</template>
							</view>
							<view class="recommend-item__info__advantage">
								<view class="ellipsis-line-clamp">
									<text>{{item.special}}</text>
								</view>
							</view>
						</view>
						<view class="iflex recommend-item__image">
							<image mode="aspectFill" :src="item.lawFirmLogo"></image>
						</view>
						<view class="iflex recommend-item__leading">
							<image src="/static/image/law/leading-lawyer2.png"></image>
							<view class="iflex aic">金牌{{item.lawFirmType == 1? '律师':'律所'}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="inline-flex aic jcsb fill home-article-tabs">
			<u-tabs height="60" fontSize="28" bgColor="#F6F6F6" activeColor="#020202"
				:activeItemStyle="{fontSize:'32rpx'}" inactiveColor="#6E6E6E" barHeight="3" :list="articleTabs"
				:barStyle="{backgroundColor:'#FF710A'}" :is-scroll="true" v-model="currentArticleTab"
				@change="loaderHomeArticleList"></u-tabs>
			<view class="more" @click="tapToArticleListPage">查看更多<view class="icon-more" style="margin-left: 12rpx;">
				</view>
			</view>
		</view>

		<view class="inline-flex fill column home-article">
			<view v-for="item of articleList" class="inline-flex fill jcsb home-article__item"
				@click.stop="tapToArticleDetail(item.articleId)">
				<view class="inline-flex column jcsb home-article__item__info">
					<view class="info-title ellipsis-line-clamp">{{item.title}}</view>
					<view class="inline-flex fill info-data">
						<view class="inline-flex aic info-data__item">
							<image src="/static/image/home/view.png"></image>
							<text>{{item.totalView}}</text>
						</view>

						<view class="inline-flex aic info-data__item" @click.stop="tapUpvote(item)">
							<image src="/static/image/other/upvote.icon.png"></image>
							<text>{{item.totalUpvote}}</text>
						</view>

						<view class="inline-flex aic info-data__item" @click.stop="tapShareArticle(item)">
							<button open-type="share" class="iflex aic jcc empty-white-button">
								<image src="/static/image/other/share.png"></image>
							</button>
						</view>
					</view>
				</view>

				<view class="inline-flex home-article__item__image aspect-fill">
					<image mode="aspectFill" :src="item.imageUrl"></image>
				</view>
			</view>
		</view>

		<view class="inline-flex fill aic jcc home-footer">
			<!-- <image src="/static/image/home/footer.png"></image> -->
			<!-- <image src="/static/image/logo.gif"></image> -->
			<view class="iflex aic jcc inner-wrap">
				<image
					src="http://jinxiangguo.oss-cn-chengdu.aliyuncs.com/2024/08/29/6f57961863b340919a14a89a7a32a818.gif">
				</image>
			</view>
			<!-- <image src="/static/image/ad.gif"></image> -->
		</view>
		<LoginPopup @success="successLogin"></LoginPopup>
	</Layout>
</template>

<script setup lang="ts">
	import Layout from '@/components/layout/layout.vue';
	import SectionTitle from '@/components/section-title/section-title.vue';
	import { setTabbar } from '@/utils/wx';
	import { ref, computed } from 'vue';
	import { getBannerList, getLawfirmList, getHomeArticleList } from '@/apis/home';
	import { cancelArticleUpvote, saveArticleUpvote } from '@/apis/article';
	import { getSupport } from '@/apis/common';
	import { onLoad, onShow, onPullDownRefresh, onShareAppMessage } from '@dcloudio/uni-app';
	import { isEmpty } from '@/utils/util';
	import { parseQuery } from '@/utils/route';
	import type { AnyObj } from '@/types/global';
	import { isLogin } from '@/utils/auth';
	import { useAuthStore } from '@/stores';
	setTabbar({ selected: 0 });
	const authStore = useAuthStore();

	const keyword = ref('');
	const bannerList = ref<AnyObj[]>([
		// {
		// 	image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
		// 	title: '昨夜星辰昨夜风，画楼西畔桂堂东'
		// },
	]);
	const recommendList = ref<AnyObj[]>([]);
	const articleList = ref<AnyObj[]>([]);

	const articleTabs = ref([
		{ name: '每日普法' }, // 1
		{ name: '司法判例' }, // 2
		{ name: '咕法研究院' }, // 3
	]);
	const currentArticleTab = ref(0);

	function loaderHomeArticleList() {
		getHomeArticleList(currentArticleTab.value + 1).then((result) => {
			articleList.value = result.rows;
		});
	}

	function tapToSearch() {
		uni.navigateTo({
			url: `/pages/search/search?keyword=${keyword.value}`
		})
	}

	function tapToService(current : number) {
		uni.setStorageSync('service_current', current);
		uni.switchTab({
			url: `/pages/service/service`
		})
	}

	function tapToLawyer() {
		uni.switchTab({
			url: `/pages/lawyer/lawyer`
		});
	}

	function tapToArticleDetail(articleId : string) {
		uni.navigateTo({
			url: `/pages-other/article-detail/article-detail?articleId=${articleId}`
		})
	}

	function tapToArticleListPage() {
		uni.navigateTo({
			url: '/pages-other/article-list/article-list'
		})
	}

	function tapToLawDetail(item : any) {
		const url = `/pages-lawyer/law${item.lawFirmType == '1' ? 'yer' : ''}-detail/law${item.lawFirmType == '1' ? 'yer' : ''}-detail?lawFirmId=${item.lawFirmId}`;
		uni.navigateTo({
			url
		});
	}

	function tapUpvote(item : AnyObj) {
		if (!isLogin()) {
			authStore.show();
			return;
		}
		// 已经点赞，要取消点赞
		if (item.upvoteStatus === 1) {
			cancelArticleUpvote(item.articleId).then(() => {
				loaderHomeArticleList();
			});
		} else {
			// 0 未点赞，要点赞
			saveArticleUpvote(item.articleId).then(() => {
				loaderHomeArticleList();
			});
		}
	}

	function tapMakePhoneCall() {
		getSupport().then((result) => {
			if (result.code !== 200 || isEmpty(result.data)) {
				uni.showToast({
					icon: 'none',
					title: '未设置电话，联系管理员'
				})
				return;
			}
			wx.makePhoneCall({
				phoneNumber: result.data.tel
			})
		});
	}

	function tapToLeaveMessage() {
		uni.navigateTo({
			url: "/pages/leave-message/leave-message"
		});
	}

	function loadData() {
		getBannerList().then((result) => {
			bannerList.value = result.rows.map(item => {
				return { ...item, image: item.imgUrl }
			})
		});

		getLawfirmList().then((result) => {
			recommendList.value = result.rows;
		});

		loaderHomeArticleList();
	}

	function successLogin(result : AnyObj) {
		console.log('success-login', result);
		loaderHomeArticleList();
	}



	onLoad((query) => {
		const q = (query as any).q;
		// const q = 'http%3A%2F%2Fnew.lawyer.mguit.com%2Fbrokerage%3FbrokerageCode%3D9074698402791493';
		console.log('==== index.q ==== ', q);
		if (!isEmpty(q)) {
			const qObj = parseQuery(decodeURIComponent(q));

			uni.setStorageSync('brokerageCode', qObj.brokerageCode);
			console.log('==== index.qObj ==== ', qObj);
			console.log('==== index.brokerageCode ==== ', qObj.brokerageCode);
		}
	});

	onShow(() => {
		keyword.value = '';
		loadData();
	});


	onPullDownRefresh(() => {
		loadData();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1500);
	});

	let currentShareArticle : AnyObj = {};
	function tapShareArticle(item : AnyObj) {
		currentShareArticle = item;
	}

	onShareAppMessage(() => {
		console.log('currentShareArticle', currentShareArticle);
		return {
			title: currentShareArticle.title ?? '文章详情',
			path: `/pages-other/article-detail/article-detail?articleId${currentShareArticle.articleId}`
		}
	});
</script>

<style lang="scss">
	.home-header {
		position: absolute;
		top: 50%;
		left: 22rpx;
		transform: translateY(-50%);

		.logo {
			width: 212rpx;
			height: 54rpx;
		}

		.split-line {
			width: 1px;
			height: 25rpx;
			margin: 0 14rpx;
			background: #C6C6C6;
		}

		.location {
			align-items: flex-end;
			color: #222222;
			font-family: "PingFang SC";
			font-size: 32rpx;
			font-style: normal;
			font-weight: 500;

			image {
				width: 16rpx;
				height: 12rpx;
				margin-left: 6rpx;
				margin-bottom: 8rpx;
			}
		}
	}

	.home-search {
		padding: 30rpx;

		&-box {
			width: 690rpx;
			height: 76rpx;
			background: #FFFFFF;
			border-radius: 58rpx;
			border: 1px solid #FDD6BB;
		}

		&__icon {
			width: 28rpx;
			height: 27rpx;
			margin-left: 30rpx;
		}

		&__input {
			margin-left: 16rpx;
			width: 470rpx;
			height: 40rpx;

			&--placeholder {
				color: #C0C0C0;
				font-size: 28rpx;
			}
		}

		&__button {
			margin-right: 1px;
			width: 124rpx;
			height: 68rpx;
			background: linear-gradient(137deg, #FFA462 0%, #FF6B00 100%);
			border-radius: 54rpx 54rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			line-height: 68rpx;
			color: #FFFFFF;
		}
	}

	.home-focus {
		padding: 0 30rpx;
	}

	.home-service {
		padding: 44rpx 46rpx;

		&__item {
			width: 96rpx;
			height: 126rpx;

			&__icon {
				width: 72rpx;
				height: 72rpx;

				image {
					width: 72rpx;
					height: 72rpx;
				}
			}

			&__text {
				height: 34rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #101010;
				line-height: 28rpx;
			}
		}
	}

	.home-action {
		padding: 0 30rpx 30rpx 30rpx;

		&__item {
			width: 332rpx;
			height: 112rpx;
			padding: 24rpx 16rpx;
			border-radius: 20rpx;
			background: #FFF;


			.telephone-icon {
				width: 64rpx;
				height: 64rpx;
			}

			.leave-word-icon {
				width: 64rpx;
				height: 64rpx;
			}

			&__info {
				padding-left: 28rpx;

				.info-title {
					color: #020202;
					font-size: 30rpx;
					font-weight: 500;
					line-height: normal;
				}

				.info-desc {
					margin-top: 4rpx;
					color: #bebebe;
					font-size: 22rpx;
					font-weight: 400;
					line-height: normal;
				}
			}


		}
	}


	.home-recommend-new {
		padding: 32rpx 0 60rpx 0;


		&__scroll {
			width: 750rpx;
			overflow-x: visible;
			flex-wrap: nowrap;
		}


		.recommend-item {
			margin-left: 28rpx;
			width: 460rpx;
			height: 228rpx;
			border-radius: 20rpx;
			border: 2rpx solid #FFF;
			overflow: hidden;
			background: linear-gradient(270deg, #E8E8E8 0%, #F6F6F6 100%);

			&__info {
				width: 264rpx;
				padding: 46rpx 0 0 28rpx;

				&__name {
					color: #000000;
					font-size: 34rpx;
					font-weight: 500;
					line-height: normal;
				}

				&__other {
					padding-top: 13rpx;
					color: #6e6e6e;
					font-size: 22rpx;
					font-weight: 400;
					line-height: normal;
				}

				&__advantage {
					padding-top: 10rpx;
					color: #6e6e6e;
					font-size: 24rpx;
					font-weight: 400;
					line-height: normal;
				}
			}

			&__image {
				width: 168rpx;
				height: 228rpx;
				background-color: beige;
			}

			&__leading {
				position: absolute;
				right: 15rpx;
				bottom: 15rpx;
				width: 104rpx;
				height: 28rpx;

				image {
					width: 100%;
					height: 100%;
				}

				view {
					position: absolute;
					left: 32rpx;
					height: 100%;
					color: #957f6b;
					font-size: 16rpx;
					font-weight: 500;
				}
			}
		}
	}


	.home-recommend {
		padding: 30rpx;
		height: 460rpx;
		overflow: hidden;

		&__wrap {
			width: 690rpx;
			height: 460rpx;
			overflow-x: auto;
		}

		.recommend-lawyer {
			&+.recommend-lawyer {
				margin-left: 24rpx;
			}
		}

	}

	.home-article-tabs {
		padding: 0 30rpx 16rpx 0;

		.more {
			padding-bottom: 8rpx;
			color: #929292;
			font-family: "PingFang SC";
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
		}
	}

	.home-article {
		padding: 0 30rpx;

		&__item {
			width: 690rpx;
			height: 196rpx;
			padding: 22rpx;
			margin-top: 24rpx;
			border-radius: 24rpx;
			background: #FFF;

			&__info {
				width: 412rpx;
				height: 100%;

				.info-title {
					width: 412rpx;
					height: 96rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #484848;
					line-height: 48rpx;
				}

				.info-data {
					padding-bottom: 10rpx;

					&__item {
						width: 40%;

						image {
							width: 32rpx;
							height: 32rpx;
						}

						text {
							padding-left: 20rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #D4D4D4;
							line-height: 28rpx;
						}

						&:last-child {
							width: 20%;

							.empty-white-button {
								width: 100%;
								height: 40rpx;
							}

							image {
								width: 28rpx;
								height: 24rpx;
							}
						}
					}
				}
			}

			&__image {
				width: 212rpx;
				height: 152rpx;
				border-radius: 18rpx;
				background-color: wheat;


				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.home-footer {
		padding: 32rpx 0;

		.inner-wrap {
			width: 690rpx;
			padding: 63rpx 0 60rpx 0;
		}

		image {
			width: 223rpx;
			height: 56rpx;
		}
	}
</style>